<!-- 首页搜索 -->
<template>
  <view>
    <view style="position: relative">
      <u-swiper
        :list="SwiperList"
        keyName="image"
        :height="state.swiperHeight + 'px'"
        imgMode="aspectFit"
        showTitle
        :autoplay="false"
        circular
      ></u-swiper>
      <view style="position: absolute; top: 5vh; left: 5px" @click="goBack">
        <u-icon name="arrow-left" color="white" size="30"></u-icon>
      </view>
    </view>
    <view style="margin: 15px 10px">
      <u-search
        class="custom-search"
        placeholder="搜商机"
        shape="round"
        v-model="formData.need_title"
        @search="handleSearch"
        :showAction="false"
      >
        <template #right>
          <span class="search-button" @click="searchIndex">搜商机</span>
        </template>
      </u-search>
    </view>
    <view
      style="
        display: flex;
        justify-content: space-around;
        margin: 18px 10px;
        font-size: 26rpx;
      "
    >
      <view class="filter-container">
        <view
          @click="shaiXuan(1)"
          class="filter-button"
          :class="{ active: state.shaiXuanIndex === 1 }"
        >
          最新发布时间
        </view>
        <view
          @click="shaiXuan(2)"
          class="filter-button"
          :class="{ active: state.shaiXuanIndex === 2 }"
        >
          快到期时间
        </view>
      </view>
      <view>
        <u-radio-group
          v-model="formData.project_jia_ji"
          placement="row"
          @change="shaiXuan(3)"
        >
          <u-radio :name="2" label="加急"></u-radio>
          <u-radio :name="1" label="不加急"></u-radio>
        </u-radio-group>
      </view>
    </view>
    <scroll-view
      class="function-scroll"
      scroll-y
      @scrolltolower="buttonScrolltolower"
      show-scrollbar="false"
      :scroll-with-animation="true"
      :style="{ height: 'calc(100vh - 38vh)' }"
    >
      <u-empty
        mode="data"
        text="暂无数据"
        v-if="dataList.length == 0"
        marginTop="100%"
        :icon="getResource('img/phone/mini/no_data.png')"
      />
      <view v-else>
        <view class="tab-panel">
          <view
            class="tab-panel-item"
            :class="{ 'tab-active': true }"
            v-for="(item, index) in dataList"
            :key="index"
            @click="handleItemClick(item)"
          >
            <view class="card-container">
              <!-- 标题和标签区域 -->
              <view class="header-section">
                <view class="title">{{ item.need_title }}</view>
                <view class="tags">
                  <u-tag
                    :text="item.project_jia_ji == 2 ? '加急中' : '不加急'"
                    :type="item.project_jia_ji == 2 ? 'error' : 'info'"
                    size="mini"
                    shape="circle"
                  />
                  <u-tag
                    v-if="item.status_note"
                    text="有备注"
                    type="warning"
                    size="mini"
                    shape="circle"
                  />
                </view>
              </view>

              <!-- 主要内容区域 -->
              <view class="content-section">
                <!-- 基本信息行 -->
                <view class="info-row">
                  <u-icon name="map" size="14" color="#7a7a7a"></u-icon>
                  <text class="info-text location"
                    >项目地点：{{ item.need_city_name || "未填写" }}</text
                  >
                </view>

                <view class="info-row">
                  <u-icon name="tags" size="14" color="#7a7a7a"></u-icon>
                  <text class="info-text type"
                    >项目类型：{{ item.company_type_name }}需求</text
                  >
                </view>
                <!-- 时间信息行 - 使用特殊样式 -->
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    background-color: #f9f9f9;
                    align-items: center;
                  "
                >
                  <view class="time-info-group">
                    <view class="time-info-row">
                      <u-icon
                        name="calendar"
                        size="14"
                        color="#7a7a7a"
                      ></u-icon>
                      <text class="time-text">发布时间：</text>
                      <text class="time-value">{{
                        item.publish_time_show || "---"
                      }}</text>
                    </view>

                    <view class="time-info-row">
                      <u-icon name="clock" size="14" color="#7a7a7a"></u-icon>
                      <text class="time-text">截止时间：</text>
                      <text class="time-value urgent">{{
                        item.need_ent_date || "---"
                      }}</text>
                    </view>
                  </view>
                  <view
                    style="font-size: 28rpx; margin-right: 15rpx"
                    v-if="Number(item.left_day) > 0"
                  >
                    距离结束<span
                      style="
                        color: red;
                        font-size: 40rpx;
                        border: 2px solid red;
                        border-radius: 50%;
                        padding: 15px;
                        margin: 0 5px;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        width: 60rpx;
                        height: 60rpx;
                        box-sizing: border-box;
                      "
                      >{{ item.left_day }}</span
                    >天
                  </view>
                </view>

                <!-- 备注信息 -->
                <view class="info-row" v-if="item.status_note">
                  <u-icon name="edit-pen" size="14" color="#7a7a7a"></u-icon>
                  <text class="info-text note"
                    >审核备注：{{ item.status_note }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { ref, onMounted, toRefs, reactive } from "vue";
import { getIndexPub } from "../../api/demand.js";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { getResource } from "@/utils/Resource";
import { getBanner } from "@/api/userInfo.js";
import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
// 状态管理
const state = reactive({
  SwiperList: [],
  dataList: [],
  swiperHeight: "",
  count: 0,
  shaiXuanIndex: "",
  formData: {
    need_title: "",
    page_no: 1,
    page_size: 10,
    page_count: 1,
    project_jia_ji: "",
    order: "",
  },
});
const { formData, dataList, SwiperList } = toRefs(state);

onLoad(async (e) => {
  try {
    formData.value.need_title = e.title || "";
    await searchIndex();
  } catch (error) {}
  try {
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth;
    state.swiperHeight = screenWidth * 0.4875; // 按比例计算高度
    const res = await getBanner("4");
    SwiperList.value = res.data.map((item) => ({
      image: item.img_show,
      id: item.id,
      title: item.title,
      type: "image",
    }));
  } catch (error) {}
});
const searchIndex = async () => {
  dataList.value = [];
  formData.value.page_no = 1;
  await search();
};
const search = async () => {
  try {
    console.log(formData.value);
    showLoading("加载中...");
    const res = await getIndexPub(formData.value);
    console.log(res);
    const { count, page_count, page_no, page_size, list } = res.data;
    dataList.value = [...dataList.value, ...list];
    state.count = count;
    Object.assign(formData.value, {
      page_count,
      page_no,
      page_size,
    });
  } catch (error) {
    console.error("请求失败:", error);
  }
};

const handleItemClick = async (e) => {
  uni.navigateTo({
    url: `/pages/user/component/recruitList?id=${e.id}&type=1`,
  });
};

const buttonScrolltolower = async () => {
  if (state.count != dataList.value.length) {
    formData.value.page_no++;
    showLoading("加载中");
    await search();
  } else {
    showToast("已经最后一页了~");
  }
};
const shaiXuan = async (e) => {
  dataList.value = [];
  state.shaiXuanIndex = e;
  formData.value.page_no = 1;
  if (e == 1) {
    formData.value.order = "publish_time_show";
  } else if (e == 2) {
    formData.value.order = "need_ent_date";
  }
  await search();
};

const handleSearch = async () => {
  dataList.value = [];
  formData.value.page_no = 1;
  await search();
};
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>
<style lang="scss" scoped>
.search-container {
  padding: 12rpx 16px;
  background: #f8f8f8;
  border-radius: 8px;
  margin: 10rpx;
}

.custom-search {
  --u-search-input-background: #fff;
  --u-search-input-border-radius: 24px;
  /* 更大的圆角 */
  --u-search-input-height: 44px;
  --u-search-input-padding: 0 16px;
  --u-search-input-border: 1px solid #e0e0e0;
}

.search-button {
  background: #137ad3;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 5px 16px;
  height: 36px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-button:hover {
  background: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.search-button:active {
  background: #096dd9;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tab-panel {
  padding: 12rpx;
}

.tab-panel-item {
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background-color: #fff;
  border: 1rpx solid #f0f0f0;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
  }
}

.card-container {
  padding: 28rpx;
}

/* 标题区域样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;

  .title {
    font-size: 34rpx;
    font-weight: 600;
    color: #222;
    flex: 1;
    margin-right: 20rpx;
    line-height: 1.4;
    letter-spacing: 0.5rpx;
    word-break: break-word;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    align-items: center;
  }
}

/* 内容区域样式 */
.content-section {
  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;

    .info-text {
      margin-left: 10rpx;
      font-size: 28rpx;
      line-height: 1.5;

      &.location {
        color: #4a6baf;
      }

      &.type {
        color: #5e8b5e;
      }

      &.note {
        color: #b85c5c;
        font-size: 26rpx;
      }
    }
  }

  /* 时间信息组样式 */
  .time-info-group {
    background-color: #f9f9f9;
    border-radius: 12rpx;
    padding: 16rpx;
    margin: 20rpx 0;

    .time-info-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .time-text {
        font-size: 22rpx;
        color: #666;
        margin-left: 8rpx;
      }

      .time-value {
        font-size: 22rpx;
        color: #333;
        margin-left: 6rpx;
        font-weight: 500;

        &.urgent {
          color: #e74c3c;
          font-weight: 600;
        }
      }
    }
  }
}

/* 标签样式增强 */
.u-tag {
  margin-left: 0 !important;

  &.u-type-error {
    font-weight: bold;
    background-color: #ffecec !important;
    color: #e74c3c !important;
  }

  &.u-type-warning {
    font-weight: bold;
    background-color: #fff8e6 !important;
    color: #f39c12 !important;
  }

  &.u-type-info {
    background-color: #f0f7ff !important;
    color: #3498db !important;
  }
}

/* 响应式调整 */
@media (max-width: 360px) {
  .header-section .title {
    font-size: 30rpx;
  }

  .content-section {
    .info-text {
      font-size: 26rpx;

      &.note {
        font-size: 24rpx;
      }
    }

    .time-info-group {
      .time-text,
      .time-value {
        font-size: 24rpx;
      }
    }
  }
}

.filter-container {
  display: flex;
  gap: 10px;
  // padding: 3px;
}

.filter-button {
  padding: 2px 6px;
  border-radius: 20px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.filter-button.active {
  background-color: #ff4d4f;
  color: white;
  border-color: #ff4d4f;
}

.filter-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
